<template>
    <div class="menu-wrapper">
        <template v-for="item in menu">
            <el-menu-item
                v-if="item.children && !item.children.length"
                :index="item.path"
                @click="open(item)"
                :key="item.name"
                :class="{ 'is-collapse': collapse }"
            >
                <template v-slot:title>
                    <span>{{ item.name }}</span>
                </template>
            </el-menu-item>
            <el-sub-menu
                v-else-if="item.children"
                :index="item.path"
                :key="item.path"
                :class="{ 'is-collapse': collapse }"
            >
                <template v-slot:title>
                    <i-ep-Setting class="mg-rt-5"></i-ep-Setting>
                    <span>{{ item.name }}</span>
                </template>
                <template v-for="(child, cindex) in item.children">
                    <el-menu-item
                        :index="child.path"
                        @click="open(child)"
                        v-if="item.children && !child.children.length"
                        :key="child.name"
                    >
                        <template v-slot:title>
                            <span>{{ child.name }}</span>
                        </template>
                    </el-menu-item>
                    <SiderBarItem v-else :menu="[child]" :key="cindex" :collapse="collapse"></SiderBarItem>
                </template>
            </el-sub-menu>
        </template>
    </div>
</template>

<script lang="ts" setup name="SiderBarItem">
import router from '@/router';
import type { IAsyncMenuState } from '@/types/user/menu';

defineProps({
    menu: {
        type: Array<IAsyncMenuState>,
        default: () => []
    },
    collapse: {
        type: Boolean,
        default: false
    }
});
const open = (item: IAsyncMenuState) => {
    router.push(item.path);
};
</script>
